<template>
  <div>
    <!-- 标签导航区 -->
    <div class="main-navigation">
      <button class="navigation-abel" @click="back()">成长报告</button>
      <i class="el-icon-arrow-right"></i>
      <button class="navigation-abel">{{semesterName}}</button>
    </div>

    <div class="box">
      <div class="word">
        <div class="flash">
          <!-- 动态翻页效果 -->
          <div class="navflipbook" ref="tilt">
              <div :ref="'fanye' + index" v-for="(item ,index) in flipbook" :key="index" class="page" @click="leftfilp(index)">
                <img :class="['fanye',`fanye${index}` ]" :src="item.title" alt="">
              </div>
          </div>
        </div>

        <div class="right">
          <div class="year">{{semesterName}}</div>
          <div class="make">制作中</div>
          <button class="gomake" @click="Gofirst()">前往制作</button>
        </div>
      </div>

      <div class="Info">
        <div class="Picture">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <!-- 第一个页面 -->
              <div style="display: flex; flex-direction: row" v-show="1 == item">
                <div class="picture1">
                  <img src="@/assets/imagesbackground/Myself.png" alt="" class="img" />
                  <div class="photo2" v-if="ismeList.status== '1'">
                    <img :src="`${src1 + ismeList['img1']}`" class="img1" />
                  </div>
                  <div class="photo10"></div>
                </div>

                <div class="picture">
                  <img src="@/assets/imagesbackground/MyFirend.png" alt="" class="img" />
                  <div class="photo1" v-if="childList.status == '1'">
                    <img :src="`${src1 + childList['img1']}`" alt="" class="img2" />
                    <img :src="`${src1 + childList['img2']}`" class="img3" />
                  </div>
                </div>

                <div class="picture">
                  <img src="@/assets/imagesbackground/Word.png" alt="" class="img" />
                  <div class="photo2" v-if="wordList.status == '1'">
                    <img :src="`${src1 + wordList['img1']}`" alt="" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/MyHomework.png" alt="" class="img" />
                  <div class="photo2" v-if="workList.status == '1'">
                    <img :src="`${src1 + workList['img1']}`" alt="" class="img1" />
                  </div>
                </div>
              </div>

              <!-- 第二个页面 -->
              <div style="display: flex; flex-direction: row" v-show="2 == item">

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Theme.png" alt="" class="img" />
                  <div class="photo2" v-if="thingList.status == '1'">
                    <img :src="`${src1 + thingList['img1']}`" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/score.png" alt="" class="img" />
                  <div class="photo2" v-if="paperList.status == '1'">
                    <img :src="`${src1 + paperList['img1']}`" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Action.png" alt="" class="img" />
                  <div class="photo1" v-if="activityList.status == '1'">
                    <img :src="`${src1 + activityList['img1']}`" alt="" class="img2" />
                    <img :src="`${src1 + activityList['img2']}`" class="img3" />
                  </div>
                </div>

                <div class="picture1">
                  <div class="background">
                    <img class="backgroundimg" src="@/assets/imagesbackground/Report.png" />
                    <img class="imgreport" src="@/assets/images/StudentReport.png" />
                  </div>

                  <div v-if="resultList.status == '1'">
                    <div class="name">
                      <span>{{ resultList["班级"] }}</span>
                      <span>{{ resultList["学生姓名"] }}</span>
                    </div>
                    <div class="height">
                      <span>{{ resultList["身高"] }}</span>
                      <span>{{ resultList["体重"] }}</span>
                    </div>
                    <div class="ear">
                      <span>{{ resultList["左眼"] }}</span>
                      <span>{{ resultList["右眼"] }}</span>
                    </div>
                    <div class="resport1">
                      <div class="score">
                        <span>{{ resultList["成绩"]["语文"] }}</span>
                        <span>{{ resultList["成绩"]["数学"] }}</span>
                        <span>{{ resultList["成绩"]["英语"] }}</span>
                        <span>{{ resultList["成绩"]["科学"] }}</span>
                      </div>
                      <div class="score">
                        <span>{{ resultList["综合评价等第"]["语文"] }}</span>
                        <span>{{ resultList["综合评价等第"]["数学"] }}</span>
                        <span>{{ resultList["综合评价等第"]["英语"] }}</span>
                        <span>{{ resultList["综合评价等第"]["科学"] }}</span>
                      </div>
                    </div>

                    <div class="resport2">
                      <div class="assess">
                        <span>{{ resultList["综合评价等第"]["道德与法"] }}</span>
                        <span>{{ resultList["综合评价等第"]["体育"] }}</span>
                      </div>
                      <div class="assess">
                        <span>{{ resultList["综合评价等第"]["音乐"] }}</span>
                        <span>{{ resultList["综合评价等第"]["信息"] }}</span>
                      </div>
                      <div class="assess">
                        <span>{{ resultList["综合评价等第"]["美术"] }}</span>
                        <span>{{ resultList["综合评价等第"]["综合实践"] }}</span>
                      </div>
                    </div>
                    <div class="showreport">
                      <div class="allassesss">
                        <span>{{ resultList["综合评价等第"]["听课专注"] }}</span>
                        <span>{{ resultList["综合评价等第"]["做事负责"] }}</span>
                      </div>
                      <div class="allassesss">
                        <span>{{ resultList["综合评价等第"]["学习主动"] }}</span>
                        <span>{{ resultList["综合评价等第"]["同学合作"] }}</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <!-- 第三个页面 -->
              <div style="display: flex; flex-direction: row" v-show="3 == item">
                <div class="picture1">
                  <img src="@/assets/imagesbackground/AwaitWord.png" alt="" class="img" />
                  <div div="send" v-if="sendList.status == '1'">
                    <span class="send1">{{ sendList["班主任寄语"] }}</span>
                    <span class="send2">{{ sendList["任课老师寄语"] }}</span>
                    <!-- <img :src="`${src1 + sendList['']}`" class="seal1">
                      <img :src="`${src1 + sendList['']}`" class="seal2"> -->
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/FirendWord.png" alt="" class="img" />
                  <div v-if="talkList.status == '1'">
                    <img :src="`${src1 + talkList['img1']}`" class="img10" />
                    <img :src="`${src1 + talkList['img1']}`" class="img11" />
                    <img :src="`${src1 + talkList['img1']}`" class="img12" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Honour.png" alt="" class="img" />
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img10" />
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img11" />
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img12" />
                  <div v-if="honourList.status == '1'">
                    <img :src="`${src1 + honourseal[0]}`" class="sealimg1" />
                    <img :src="`${src1 + honourseal[1]}`" class="sealimg2" />
                    <img :src="`${src1 + honourseal[2]}`" class="sealimg3" />
                  </div>
                  <div class="info">
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/sum.png" alt="" class="img" />
                  <div v-if="sumList.status == '1'">
                    <img :src="`${src1 + sumList['img1']}`" class="img10" />
                    <img :src="`${src1 + sumList['img1']}`" class="img11" />
                    <img :src="`${src1 + sumList['img1']}`" class="img12" />
                  </div>
                </div>
              </div>

              <!-- 第四个页面 -->
              <div style="display: flex; flex-direction: row" v-show="4 == item">
                <div class="picture1">
                  <img src="@/assets/imagesbackground/Grow.png" alt="" class="img" />
                  <div class="photo2" v-if="contentsList.status == '1'">
                    <img :src="`${src1 + contentsList['img1']}`" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Personality.png" alt="" class="img" />
                  <div class="photo2" v-if="specificList.status == '1'">
                    <img :src="`${src1 + specificList['img1']}`" class="img1" />
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { makereport } from "@/api/grow/index";
import module from "@/allurlimg/img";

export default {
  components: {
    // headerNavigation3,
    // footerNavigation,
  },
  data () {
    return {
      src1: '',
      semesterName: this.semesterName,
      flipbook: [
        {
          id: 1,
          title: require("../../../assets/images/010.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 2,
          title: require("../../../assets/images/002.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 3,
          title: require("../../../assets/images/003.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 4,
          title: require("../../../assets/images/004.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 5,
          title: require("../../../assets/images/005.jpg"),
          transform: "rotateY(0deg)",
        },
        {
          id: 6,
          title: require("../../../assets/images/006.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 7,
          title: require("../../../assets/images/007.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 8,
          title: require("../../../assets/images/008.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 9,
          title: require("../../../assets/images/009.png"),
          transform: "rotateY(0deg)",
        },
        {
          id: 10,
          title: require("../../../assets/images/001.jpg"),
          transform: "rotateY(0deg)",
        },
      ],
      message: {},
      growthItem: [],
      reportList: [],
      ismeList: [],
      childList: [],
      wordList: [],
      workList: [],
      thingList: [],
      paperList: [],
      activityList: [],
      resultList: [],
      sendList: [],
      talkList: [],
      honourList: [],
      sumList: [],
      contentsList: [],
      specificList: [],
      seals: [],
      honourseal: [],
    };
  },

  methods: {
    back () {
      this.$router.push("/report1");
    },
    Gofirst () {
      this.$router.push("/doGrowth");
    },

    /*点击翻页效果 */
    leftfilp(index) {
      this.$refs[`fanye${index}`][0].classList.add('active')
    },
    /*调用成长报告图片 */
    async gets () {
      console.log(this.growthId, this.studentId)
      const res = await makereport({
        growthId: this.growthId,
        studentId: this.studentId,
      });
      console.log(res);
      this.growthItem = res.data;

      this.seals = this.growthItem["seals"]
      console.log(this.seals)

      if (this.growthItem["0"]["status"] == 1) {
        this.ismeList = this.growthItem["0"];
      }

      if (this.growthItem["1"]["status"] == 1) {
        this.childList = this.growthItem["1"];
      }

      if (this.growthItem["12"]["status"] == 1) {
        this.wordList = this.growthItem["12"];
      }

      if (this.growthItem["3"]["status"] == 1) {
        this.workList = this.growthItem["3"];
      }

      if (this.growthItem["4"]["status"] == 1) {
        this.thingList = this.growthItem["4"];
      }

      if (this.growthItem["5"]["status"] == 1) {
        this.paperList = this.growthItem["5"];
      }

      if (this.growthItem["6"]["status"] == 1) {
        this.activityList = this.growthItem["6"];
      }

      if (this.growthItem["13"]["status"] == 1) {
        this.resultList = this.growthItem["13"];
      }

      if (this.growthItem["2"]["status"] == 1) {
        this.sendList = this.growthItem["2"];
      }

      if (this.growthItem["7"]["status"] == 1) {
        this.talkList = this.growthItem["7"];
      }

      console.log(this.seals)
      if (this.growthItem["8"]["status"] == 1) {
        this.honourList = this.growthItem["8"];
        if (this.honourList['honor1'] == 1) {
          this.honourseal.push(this.seals['卓越少年专用章'])
        }
        if (this.honourList['honor2'] == 1) {
          this.honourseal.push(this.seals['励志少年专用章'])
        }
        if (this.honourList['honor3'] == 1) {
          this.honourseal.push(this.seals['模范学生专用章'])
        }
        if (this.honourList['honor4'] == 1) {
          this.honourseal.push(this.seals['梦想领袖专用章'])
        }
        if (this.honourList['honor4'] == 1) {
          this.honourseal.push(this.seals['文明学生专用章'])
        }
      }

      if (this.growthItem["9"]["status"] == 1) {
        this.sumList = this.growthItem["9"];
      }

      if (this.growthItem["10"]["status"] == 1) {
        this.contentsList = this.growthItem["10"];
      }

      if (this.growthItem["11"]["status"] == 1) {
        this.specificList = this.growthItem["11"];
      }

    },
  },

  created () {
  },
  mounted () {
    let growthId = this.$route.params.growthId;
    let studentId = this.$route.params.studentId;
    let semesterName = this.$route.params.semesterName;
    if (growthId !== undefined) {
      sessionStorage.setItem("growthId", growthId);
      this.growthId = sessionStorage.getItem("growthId");
    } else {
      this.growthId = sessionStorage.getItem("growthId");
    }

    if (studentId !== undefined) {
      sessionStorage.setItem("studentId", studentId);
      this.studentId = sessionStorage.getItem("studentId");
    } else {
      this.studentId = sessionStorage.getItem("studentId");
    }

    if (semesterName !== undefined) {
      sessionStorage.setItem("semesterName", semesterName);
      this.semesterName = sessionStorage.getItem("semesterName");
    } else {
      this.semesterName = sessionStorage.getItem("semesterName");
    }
    this.gets();
    this.src1 = module.host;
  },
};
</script>


<style scoped>
/*内容区域的盒子 */
.box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  line-height: .625rem;
  width: 75rem;
  height: 50rem;
  margin:0 auto;
}

/*上面的翻页和文字一起的盒子*/
.word {
  display: flex;
  margin-top: 2.5rem;
}

/*页面下半部分的内容*/
.Info {
  display: flex;
  margin-top: 10rem;
}
/*成长报告相关页面 */
.Picture {
  display: flex;
  /* margin-left: 16.875rem; */
  justify-content: center;
}
/*学年学期*/
.word .year {
  margin-top: 3.25rem;
  margin-left: 2.4375rem;
  font-size: 3.0rem;
  font-weight: 700;
}
/*文字制作中 */
.word .make {
  background-color: #f2e5e5;
  width: 5.375rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 2.25rem;
  margin-left: 2.4375rem;
  margin-top: 1.875rem;
  border-radius: .3125rem;
  text-align: center;
  word-spacing:normal;
}
/*导出相册按钮 */
.word .gomake {
  background-color: #7c0000;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 1.2rem;
  line-height: 2.875rem;
  margin-left: 2.4375rem;
  margin-top: 3.125rem;
  color: #d9d6d9;
  border-radius: .3125rem;
  border:#7c0000;
  cursor: pointer;
}

/*一个模本盒子*/
.picture1 {
  width: 13.75rem;
  height: 19.375rem;
  position: relative;
}

.zhaopian {
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}

/* 放翻页书的盒子*/
.flash {
  display: flex;
  width: 31.25rem;
  height: 17.25rem;
  /* margin-left: 7.5rem; */
}

/*右边的文本框 */
.right {
  display: flex;
  flex-direction: column;
}

/*翻页效果的样式*/
.navflipbook {
  cursor: pointer;
  position: relative;
  display: flex;
  transition: all 0.8s;
  transform-style: preserve-3d;
  transform: perspective(589px) rotateX(360deg);
  width: 400px;
}

.tiltnavflipbook {
  transform: perspective(589px) rotateX(420deg);
}
.page {
  position: absolute;
  transform-style: preserve-3d;
  width: 50%;
  left: 25%;
  transition: all 0.8s;
  transform-origin: left;
  transform: rotateY(0deg);
}
@keyframes test {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-180deg);
  }
}

@keyframes moveshadow {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(50%);
  }
  100% {
    filter: brightness(100%);
  }
}

.fanye {
  width: 100%;
  transform-origin: center left;
}

.fanye1 {
  animation: test 2s ease-in-out forwards;
}
.fanye2 {
  animation: test 4s ease-in-out forwards;
}

.fanye3 {
  animation: test 6s ease-in-out forwards;
}

.fanye4 {
  animation: test 8s ease-in-out forwards;
}
.fanye5{
  animation: test 10s ease-in-out forwards;
}

.active .fanye {
  /*animation: test 0.4s ease-out;*/
  animation: test 2s ease-out forwards;
  transform-origin: center left;
}



/*0*/
/*一个模本盒子*/
.picture1 {
  display: flex;
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}
/*背景照片*/
.img {
  height: 19.375rem;
  width: 13.75rem;
}
/*内容照片 */
.photo2 {
  height: 13.1875rem;
  width: 9.875rem;
  position: absolute;
  z-index: 2;
  top: 0rem;
  margin-top: 2.75rem;
  margin-left: 2rem;
}
/*上传的照片*/
.img1 {
  position: relative;
  height: 13.1875rem;
  width: 9.875rem;
  z-index: 2;
}

/*我和我的小伙伴 */
/*一个模本盒子*/
.picture {
  display: flex;
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}
/*背景照片*/
.img {
  height: 19.375rem;
  width: 13.75rem;
}
/*内容照片 */
.photo1 {
  height: 13.1875rem;
  width: 9.875rem;
  position: absolute;
  z-index: 2;
  top: 0rem;
  margin-top: 2.75rem;
  margin-left: 2rem;
}
.img2 {
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
}
.img3 {
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
  margin-top: 1.9375rem;
}

/*使用跑马灯的组件实现轮播效果 */
.el-carousel {
  width: 75rem;
  justify-items: center;
  align-content: center;
}

/*成长报告和按钮之间的距离 */
.el-carousel__item.is-animating {
  margin-left: 6.875rem;
}

.background {
  display: flex;
}

.backgroundimg {
  height: 19.375rem;
  width: 13.75rem;
  z-index: 1;
  position: relative;
  margin: 0 auto;
}
.imgreport {
  position: absolute;
  z-index: 2;
  height: 15rem !important;
  width: 11.875rem !important;
  left: 50.1%;
  top: 48.5%;
  transform: translate(-50%, -50%);
}
/* 信息 */
.name {
  display: flex;
  z-index: 3;
  position: absolute;
  top: 20.5%;
  left: 15%;
  font-size: .25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.height {
  display: flex;
  z-index: 3;
  position: absolute;
  top: 24.5%;
  left: 15%;
  font-size: .25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.ear {
  z-index: 3;
  position: absolute;
  top: 24.5%;
  right: 15%;
  font-size: .25rem;
  width: .625rem;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 1.25rem;
}
.score {
  display: flex;
  /* width: 7.5rem; */
  justify-content: space-between;
  margin-left:0.6rem;
}
.score1{
  margin-left:0.2rem;
}
.resport1 {
  z-index: 3;
  position: absolute;
  top: 34.8%;
  right: 17%;
  font-size: .25rem;
}
.assess {
  width: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.resport2 {
  z-index: 3;
  position: absolute;
  top: 50.2%;
  right: 17%;
  font-size: .8125rem;
}
.allassesss {
  display: flex;
  width: 6.25rem;
  justify-content: space-between;
}
.showreport {
  z-index: 3;
  position: absolute;
  top: 70.5%;
  right: 20%;
  font-size: .8125rem;
}
/* 按钮 */
.btn {
  color: rgba(16, 16, 16, 1);
  font-size: .875rem;
  text-align: center;
  border: .0625rem solid rgba(187, 187, 187, 1);
  background-color: rgba(124, 0, 0, 1);
  width: 8.125rem;
  height: 2.1875rem;
  color: rgba(255, 255, 255, 1);
}
.btnCountainer {
  width: 100%;
  text-align: center;
  margin-top: 2.5rem;
}

.send1 {
  position: absolute;
  height: 6.25rem;
  width: 10.625rem;
  z-index: 2;
  top: 18%;
  left: 15%;
  line-height: .9375rem;
}

.send2 {
  position: absolute;
  height: 6.25rem;
  width: 10.625rem;
  z-index: 2;
  top: 60%;
  left: 15%;
  line-height: .9375rem;
}
.img10 {
  height: 4.375rem;
  width: 11.25rem;
  position: absolute;
  z-index: 2;
  top: 1.875rem;
  left: 1.25rem;
}
.img11 {
  height: 4.375rem;
  width: 11.25rem;
  position: absolute;
  z-index: 2;
  top: 7.5rem;
  left: 1.25rem;
}
.img12 {
  height: 4.375rem;
  width: 11.25rem;
  position: absolute;
  z-index: 2;
  top: 13.125rem;
  left: 1.25rem;
}

/* 8页面的字*/
.info {
  position: absolute;
  top: 20%;
  left: 40%;
  z-index: 3;
}
.date1 {
  font-size: .0625rem;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
  margin-left: 30%;
  margin-top: 5%;
}
.info2 {
  margin-top: 5rem;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
}
.date2 {
  font-size: .0625rem;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
  margin-left: 30%;
  margin-top: 5%;
}
.info3 {
  margin-top: 5rem;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
}
.date3 {
  font-size: .0625rem;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
  margin-left: 30%;
  margin-top: 5%;
}
/*小伙伴的话页面的字 */
.word1 {
  position: absolute;
  top: 14%;
  left: 17%;
  z-index: 3;
  width: 11.25rem;
  font-size: .8125rem;
}
.maininfo {
  width: 8.75rem;
}
.word2 {
  display: inline-block;
  width: 9.1875rem;
  height: 2rem;
}

.word3 {
  display: inline-block;
  width: 9.1875rem;
  height: 2rem;
  margin-top: 27%;
}

.word4 {
  display: inline-block;
  width: 9.1875rem;
  height: 2rem;
  margin-top: 26%;
}
.word5 {
  margin-left: 70%;
  font-size: .0625rem;
}

.return {
  font-size: 1.125rem;
  text-align: center;
  position: absolute;
  left: 13.125rem;
  border: 0rem;
  background: #fff;
}

/* 标签导航区内容 */
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 14.375rem 0 14.375rem;
  flex-direction: row;
}
.icon-shouye-copy {
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: .1875rem;
}
.icon-right-1-copy {
  color: darkgray;
  font-size: 1.5625rem;
  padding: .4375rem;
}


/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: .5rem 1.3125rem .5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
  cursor: pointer;
}


.el-icon-arrow-right:before {
  font-size: 2.25rem;
}

.honour1{
  position:absolute;
  z-index:3;
  top:20%;left:40%;
}

.honour2{
  position:absolute;
  z-index:3;
  top:50%;left:40%;
}

.honour3{
  position:absolute;
  z-index:3;
  top:78%;left:40%;
}

.seal1{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:8rem;
  left:9rem;
}

.seal2{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:15rem;
  left:9rem;
}

.sealimg1{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:3.15rem;
  left:5.2rem;
}
.sealimg2{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:8.73rem;
  left:5.2rem;
}

.sealimg3{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:14.5rem;
  left:5.2rem;
}

.seal{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:13rem;
  left:38rem;
}


</style>
